﻿<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="java.util.*" %>
<%@ page import="org.jadestudio.home.entity.*" %>

	<% List<java.util.Map> feedList = (List<java.util.Map>)request.getAttribute("feedList"); %>

<script language="javascript">

	var stage_count = <%= feedList.size() %> ;
	var stage_index = 0;
	var stage_timer_switcher;
	
	$(document).ready(
	function()
	{
		switchStage(1);
		stage_timer_switcher = setInterval(switchNextStage,5000);
		document.getElementById('searchtext').value = nullsearch;
	});	
	
	// 橱窗代码
	function switchStage(index)
	{
		for(var i=1;i<=stage_count;i++)
		{
			if (i==index)
			{
				$("#stage_"+i).css("display", "block");
				$("#stage_"+i).css("margin-top",0);
				$("#stage_page_"+i).attr("class","stage_page_span_selected");
			}
			else
			{
				$("#stage_"+i).css("display", "none");
				$("#stage_page_"+i).attr("class","stage_page_span");
			}
		}
		stage_index = index;
	}
	
	var stageswitching = false;
	function switchStageAnimation(index)
	{
		if (stage_index!=index && !stageswitching)
		{
			stageswitching = true;
		
			$("#stage_"+index).css("margin-left",916);
			$("#stage_"+index).css("width",0);
			if (index>stage_index)
			{
				$("#stage_"+index).css("margin-top",-300);
				$("#stage_"+stage_index).css("margin-top",0);
			}
			else
			{
				$("#stage_"+index).css("margin-top",0);
				$("#stage_"+stage_index).css("margin-top",-300);
			}
			$("#stage_"+index).css("display","block");
			
			$("#stage_page_"+stage_index).attr("class","stage_page_span");			
			$("#stage_page_"+index).attr("class","stage_page_span_selected");
		
			var timer = setInterval(
				function()
				{
					if ($("#stage_" + stage_index).width()>=60)
					{
						$("#stage_" + stage_index).css("width",$("#stage_" + stage_index).width()-60);
						$("#stage_" + index).css("width",$("#stage_" + index).width()+60);
						$("#stage_" + index).css("margin-left",916 - $("#stage_" + index).width());
					}
					else
					{
						$("#stage_"+index).css("margin-left",0);
						$("#stage_"+index).css("width",916);
						$("#stage_"+index).css("margin-top",0);
						$("#stage_"+stage_index).css("display","none");
						
						stage_index = index;
						stageswitching = false;
						clearInterval(timer);
					}
				},20);
		}
	}
	
	function switchNextStage()
	{
		if (stage_index<stage_count)
			switchStageAnimation(stage_index+1);
		else
			switchStageAnimation(1);
	}
	
	function switchPrevStage()
	{
		if (stage_index>1)
			switchStageAnimation(stage_index-1);
		else
			switchStageAnimation(stage_count);
	}

</script>
	<!-- 橱窗 -->
	<div class="header_shadow"></div>
		
	  <div class="stage" onmouseover="clearInterval(stage_timer_switcher);" onmouseout="stage_timer_switcher = setInterval(switchNextStage,5000);">
	  <% for(int i=0;i<feedList.size();i++){ %>
	  	<div id="stage_<%= i+1 %>" class="stage_item" style="background:url(<%= feedList.get(i).get("feed_image") %>)"><a href="<%= feedList.get(i).get("feed_url") %>" title="<%= feedList.get(i).get("feed_title") %>" target="_blank"></a></div>
	  <% } %>
		<div class="stage_left" onclick="switchPrevStage();"></div>
		<div class="stage_right" onclick="switchNextStage();"></div>
	  </div>
	  
	 <div class="footer_shadow"></div>
	 
	  <div id="stage_page" class="stage_page" onmouseover="clearInterval(stage_timer_switcher);" onmouseout="stage_timer_switcher = setInterval(switchNextStage,5000);">
	 <% for(int i=0;i<feedList.size();i++){ %>
	  	<span id="stage_page_<%= i+1 %>" onclick="switchStageAnimation(<%= i+1 %>);"></span>
	  <%} %>
	  </div>
